<template>
	<view class="contant">
		<view class="Integralbox">
			<view class="gradebox">
				<text class="grade">1900</text>
				<text class="gradejiesao">可用积分</text>
			</view>
			<view class="vertical"></view>
			<view class="gradebox">
				<text class="grade">68700</text>
				<text class="gradejiesao">累积获得积分</text>
			</view>
		</view>
		<view class="hr"></view>
		<view class="bt">
			<view class="nowtime">
				近30天记录
			</view>
			<view class="record">
				<view class="goodsbox">
					<text class="goods">兑换商品</text>
					<text class="time">2017-05-06 15:00</text>
				</view>
				<view class="jifen">
					-100
				</view>
			</view>
			<view class="hrs"></view>
		</view>

	</view>
</template>

<script>
</script>

<style scoped lang="less">
	.contant {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;

		.Integralbox {
			width: 100%;
			padding: 30rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-around;
			height: 232rpx;

			.gradebox {
				margin-top: 70rpx;

				.grade {
					display: block;
					text-align: center;
					font-family: PingFang-SC-Heavy;
					font-size: 36rpx;
					color: #e4230f;
				}

				.gradejiesao {
					font-family: PingFang-SC-Heavy;
					font-size: 24rpx;
					// text-align: center;
					color: #b6b6b6;
					margin-top: 28rpx;
				}
			}

			.vertical {
				width: 1rpx;
				height: 100%;
				background-color: #cbcbcb;
			}
		}

		.hr {
			width: 100%;
			height: 15rpx;
			background-color: #ededed;
		}

		.bt {
			padding: 38rpx 44rpx 20rpx 23rpx;
			box-sizing: border-box;

			.nowtime {
				font-family: MicrosoftYaHei-Bold;
				font-size: 30rpx;
				font-weight: 700;
				color: #000000;
				margin-bottom: 60rpx;
			}

			.record {
				display: flex;
				justify-content: space-between;
				height: 97rpx;
				border-bottom: 1rpx solid #ededed;
				margin-bottom: 50rpx;
				.goodsbox {
					.goods {
						display: block;
						font-family: MicrosoftYaHei;
						font-size: 26rpx;
						color: #000000;
					}

					.time {
						display: block;
						font-family: MicrosoftYaHei;
						font-size: 22rpx;
						color: #999999;
						margin-top: 25rpx;
					}
				}
			}
		}
	}
</style>
